<template>
    <div>
        <NavBar :title="title"></NavBar>
        <van-tabs v-model:active="active">
          
  <van-tab title="推荐"><van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
    <Swipe :images="images" :imgwidth="imgwidth" :imgheight="imgheight">
    </Swipe>
<div>
    <p>SB所以然</p>
    <div class="a">
        <div style="background-color: yellowgreen;" class="a1">SB所以然</div>
    </div>
</div>
   </van-tab>
  <van-tab title="美食">美食</van-tab>
  <van-tab title=" 运动"> 运动</van-tab>
  <van-tab title="保健品">保健品</van-tab>
  <van-tab title="内衣">内衣</van-tab>
  <van-tab title=" 更多"> 更多</van-tab>
</van-tabs>

        
    </div>
</template>

<script setup>
import NavBar from '@/components/NavBar.vue';
const title = '首页'
import Swipe from '@/components/Swipe.vue';
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-6.jpeg',
];
const imgwidth = '100%'
const imgheight = '200px'
import { useRouter } from 'vue-router';
const router=useRouter()
const onSearch=()=>{
    router.push('/home/search')
}
const onClickButton=()=>{
    router.push('/home/search')
}
</script>

<style lang="scss" scoped>
.a{
width: 100%;
overflow-x: auto;
}
.a1{
width: 200%;height: 30px;
}
</style>